<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>new webview</title>
		<script src="../../js/mui.min.js"></script>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style>
			.slider-group .mui-slider-item {
				padding-top: 40%;
				position: relative;
			}
			.slider-item-content {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				background-color: #4CD964;
			}
			.slider-item-content img {
				width: 100%;
				height: 1005;
			}
			.list-item {
				padding-bottom: 10px;
				position: relative;
			}
			.list-item:nth-child(2n-1) {
				padding-right: 2px;
			}
			.list-item:nth-child(2n) {
				padding-left: 2px;
			}
			.list-content {
				/*background-color: #eee;*/
			}
			.list-content .thumb {
				height: 120px;
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
			}
			.list-content .canel {
				padding: 5px 10px;
			}
			.list-content .canel h4 {
				font-size: 14px;
				color: #333;
				font-weight: 600;
			}
			.list-content .canel p {
				margin-bottom: 0;
			}
		</style>
	</head>
	<body style="background-color: yellow;">
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--轮播-->
				<div class="mui-slider">
				  <div class="mui-slider-group slider-group">
				    <div class="mui-slider-item">
				    		<div class="slider-item-content">
				    			<img src="https://puui.qpic.cn/tv/0/16206626_404224/0"/>
				    		</div>
				    </div>
				    <div class="mui-slider-item">
				    	<div class="slider-item-content">
				    		<img src="https://puui.qpic.cn/tv/0/16190831_404224/0" />
				    	</div>
				    </div>
				    <div class="mui-slider-item">
				    		<div class="slider-item-content">
				    			<img src="https://img1.gtimg.com/v/pics/hv1/84/129/2247/146144154.jpg" />
				    		</div>
				    </div>
				    <div class="mui-slider-item">
					    	<div class="slider-item-content">
					    		<img src="https://puui.qpic.cn/tv/0/15483959_404224/0" />
					    	</div>
				    </div>
				  </div>
				  <div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>
				<!-- end 轮播-->
			
				<div class="mui-row" style="background-color: #fff; padding-top: 20px;">
					<div class="list-item mui-col-xs-6" v-for="item in list">
	        	<div class="list-content">
							<div class="thumb" :style="{backgroundImage: 'url('+ item.thumb +')'}"></div>
							<div class="canel">
								<h4 class="mui-ellipsis">{{item.title}}</h4>
								<div class="mui-clearfix">
									<p class="mui-pull-left"><span class="mui-icon mui-icon-star" style="font-size: 18px;"></span>：2345</p>
									<p class="mui-pull-right"><span class="mui-icon mui-icon-refresh" style="font-size: 16px;"></span>：00:15:00</p>
								</div>
							</div>
						</div>
	        </div>
		    </div>
		    
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '.mui-content',
				data: {
					list: [{
						id: 1,
						title: '三块广告牌',
						thumb: 'https://puui.qpic.cn/tv/0/16206626_404224/0',
						info: '三块广告牌',
						type: '广告'
					}, {
						id: 2,
						title: '一路向西（完整版）一路向西（完整版）',
						thumb: 'https://puui.qpic.cn/tv/0/16190831_404224/0',
						info: '三块广告牌',
						type: ''
					}, {
						id: 3,
						title: '绣春刀',
						thumb: 'https://img1.gtimg.com/v/pics/hv1/84/129/2247/146144154.jpg',
						info: '三块广告牌',
						type: ''
					}, {
						id: 4,
						title: '蜜桃成熟时',
						thumb: 'https://puui.qpic.cn/tv/0/15483959_404224/0',
						info: '三块广告牌',
						type: ''
					}]
				},
				
			});
			
			
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style:'circle',
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			
			function toDetai() {
				mui('.list-item').on('tap', '.list-content', function () {
					mui.openWindow({
						id: 'video-detail.html',
						url: '../video-detail.html',
						styles: {
							hardwareAccelerated: true, // 开启硬件加速
							titleNView: {
								titleText: '视频',
					      backgroundColor:"#F7F7F7", 
					      autoBackButton: true,
					      type: 'transparent'
							}
						}
					});
				})
				
			}
				
			mui.plusReady(function () {
				toDetai()
			});
			
			mui('.mui-slider').slider({interval: 0});
			// 手动切换图片时阻止滑动事件冒泡
			document.querySelector('.mui-slider').addEventListener('slide', function (event) {
				event.stopPropagation();
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
					mui.toast('下拉刷新成功');
				}, 1000);
			}
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					
					var newData = [{
						id: 3,
						title: '绣春刀',
						thumb: 'https://img1.gtimg.com/v/pics/hv1/84/129/2247/146144154.jpg',
						type: ''
					}, {
						id: 4,
						title: '蜜桃成熟时',
						thumb: 'https://puui.qpic.cn/tv/0/15483959_404224/0',
						type: ''
					}]
					vm.$data.list = vm.$data.list.concat(newData);
					mui.plusReady(function () {
						toDetai()
					});
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					
				}, 1000);
			}
		</script>
	</body>
</html>
